{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container mt-4">
    <h4 class="mb-4">作业详情</h4>
    
    <div class="card">
        <div class="card-header">
            
           <h8>
                 <i class="bi bi-command"></i>
                {{ homework.class_subject }} 
           </h8>
        </div>
        <div class="card-body">
            <p class="card-text">{{ homework.description }}</p>
            <p class="card-text"><strong>作业内容:</strong> {{ homework.content }}</p>
            <span > <strong>布置日期:</strong> {{ homework.assigned_date }}</span>
            {% if homework.due_date %}------
            <span class="card-text"><strong>截止日期:</strong>{{ homework.due_date }}</span>
            {% endif %}
        </div>
    </div>

    <h5 class="mt-4">
                 <i class="bi bi-command"></i>
                 作业提交情况
    </h5>
    <table class="table table-striped">
        <thead class="table-dark">
            <tr>
                <th>学生</th>
                <th>提交日期</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for submission in submissions %}
            <tr>
                <td>{{ submission.student }}</td>
                <td>{{ submission.submission_time|date:"Y-m-d" }}</td>
                <td>{{ submission.get_status_display }}</td>
                <td>
                   <a  class="btn btn-sm btn-primary" href="{% url 'core:homework_submission_update' submission.pk %}">查看详情</a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="3" class="text-center">暂无作业提交记录</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <div>
    <div class="row justify-content-center">
          <h5>   <i class="bi bi-command"></i>作业质量分布图：</h5>
       <div class="col-md-6 ">
         <canvas id="myChart2"></canvas>
       </div>
    </div>
    <script src="{% static 'chartjs/chart.umd.min.js' %}"></script>
    <script>
         const ctx2=document.getElementById('myChart2');

 new Chart(ctx2,{
     type:'pie',
     data:{
            labels: {{status_list.names|safe}},
            datasets: [{
                  label: 'My First Dataset',
                  data: {{status_list.counts|safe}},
                  backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(255, 205, 86)'
                  ],
                  hoverOffset: 4
                }]
            }
 });
    </script>
</div>

{% endblock %}